今天是第 15 天，沒想到已經到了一半了，希望能夠順利完賽~~

Spread Operator 展開運算子是 ES6 版本的新功能，本來我只知道簡單的用法，今天想要多知道更多的應用，然後筆記並實作。

Spread Operator

使用對象與作用：

• 可迭代的 Array 或 String
  • 如果是 Function，會將其展開成 0 到多個引數
  • 如果是 Array 或字組，會將其展開成 0 到多個元素
• Object
  • 展開成 0 到多個 key-value pair

使用場景：

• 當 Object 或 Array 的所有元素，需要被淺拷貝(只有一層)到新的 Object 或 Array
• 在呼叫 Function 時，當成引數的列表，一一展開使用

語法

用在 Function arguments list，

myFunction(a, ...iterableObj, b)

用在 Array literals，

[1, ...iterableObj, '4', 'five', 6]

用在 Object literals，

{ ...obj, key: 'value' }

拷貝一個 Array

對象：Array
輸出：Array

let array1 = [2, 4, 6]
let array2 = [...array1]

console.log(array2)  // [2, 4, 6]

把 String 分解成字符，新建一個 Array

對象：String
輸出：Array

let string1 = 'Hello, Daisy.'
let array3 = [...string1]

console.log(array3)
// ['H', 'e', 'l', 'l', 'o', ',', ' ', 'D', 'a', 'i', 's', 'y', '.']

合併 Array (前後)

對象：Array
輸出：Array

let array4 = [1, 3, 5]
let array5 = [7, 9]

array4 = [...array4, ...array5]

console.log(array4)  // [1, 3, 5, 7, 9]

也可以不要修改到原本的 Array，

let array6 = [...array4, ...array5]

console.log(array6)  // [1, 3, 5, 7, 9]

也可以搭配 Array.push()，

array4.push(...array5)

console.log(array4)  // [1, 3, 5, 7, 9]

合併 Array (插入中間的元素當中)

對象：Array
輸出：Array

把 array7 加在 array8 裡，

let array7 = ['a', 'b', 'c', 'd', 'e']
let array8 = ['0', ...array7, '6']

console.log(array8)  // ['0', 'a', 'b', 'c', 'd', 'e', '6']

找出 Array 當中的最大值或最小值

對象：Array 當中的數值
輸出：數值

搭配 Math.max()、Math.min()。
如果想要找 12, 82, 2, -4, 0 當中的最大值與最小值，平常會這樣子寫，

console.log(Math.max(12, 82, 2, -4, 0))  // 82
console.log(Math.min(12, 82, 2, -4, 0))  // -4

這時候可以使用展開運算子了~~

let array9 = [12, 82, 2, -4, 0]

console.log(...array9)  // 12 82 2 -4 0
console.log(Math.max(...array9))  // 82
console.log(Math.min(...array9))  // -4

合併 Object

對象：Object
輸出：Object

let obj1 = {
  name: 'apple',
  color:'red',
  price: 30
}

let obj2 = {
  size: 'small',
  shape: 'round'
}

let obj3 = { ...obj1, ...obj2 }

console.log(obj3)
// { name: 'apple', color: 'red', price: 30, size: 'small', shape: 'round' }

解構 Object

對象：Object、變數
輸出：變數的值

let { x, y, ...z } = {
  x: 1,
  y: 2,
  a: 3,
  b: 4
}

console.log(x)  // 1
console.log(y)  // 2
console.log(z)  // { a: 3, b: 4 }

apply() 的替代方案

一般想要用 Array 中的元素用作 Function 的引數時，很常使用 Function.prototype.apply() 這個方法。

const args = [0, 1, 2]

function myFunction(x, y, z) {
  return x + y + z
}

myFunction.apply(null, args)  // 3

這時可以使用展開運算子，

const args = [0, 1, 2]

function myFunction(x, y, z) {
  return x + y + z
}

myFunction(...args)  // 3

也可以這樣使用，

const args2 = [1, 2]

function myFunction2(x, a, b, y, z) {
  return x + a + b + y + z
}

myFunction2(0, ...args2, 3, 4) // 10

Demo

明天會再接續 Rest Parameter 與兩者的比較

參考資料：
10 Uses for JavaScript’s Spread Operator
MDN - Spread syntax (...)
JavaScript Spread Operator

文章同步更新於 medium